// 固定收益类
import accounting from 'accounting';
import { CaretRightOutlined } from '@ant-design/icons';
import { connect, routerRedux } from 'dva';
import React, { PureComponent } from 'react';

import { TableC } from '../../../../comps';
import styles from '../index.less';

@connect(({ loading, keyFiguresM }) => ({ loading, keyFiguresM }))
export default class FixedIncome extends PureComponent {
  // eslint-disable-next-line react/state-in-constructor
  state = {
    activeIndex: '',
    columns: [],
    currentPage: 1,
    pageSize: 10,
  };

  componentDidMount() {
    this.changeColumns();
  }

  // 优化表格样式
  changeColumns = () => {
    const {
      keyFiguresM: { fixedIncomeColumns },
    } = this.props;
    fixedIncomeColumns.forEach((element) => {
      if (element.key == 'riseFall') {
        // 未来一日净现金流
        element.render = (val, record) => {
          if (val === null || val === undefined) {
            return '--';
          }
          const result = accounting.formatNumber(Number(val), 2);
          return (
            // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
            <div
              style={{
                color: val == 0 ? 'black' : val > 0 ? 'red' : 'green',
                cursor: 'pointer',
              }}
              onClick={() => this.riseFallOnclick(record)}
            >
              <span className={styles.hoveUnderLine} style={{ marginRight: '9px' }}>
                {result}
              </span>
              <CaretRightOutlined style={{ color: '#CDDAF9' }} />
            </div>
          );
        };
      }
      if (element.key == 'unitEstimation') {
        // 静态收益率
        element.render = (val, record) => {
          if (val === null || val === undefined) {
            return '--';
          }
          const result = accounting.formatNumber(Number(val), 2);
          return (
            // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
            <div
              style={{
                cursor: 'pointer',
              }}
              onClick={() => this.unitEstimationOnclick(record)}
            >
              <span className={styles.hoveUnderLine} style={{ marginRight: '9px' }}>
                {result}%
              </span>
              <CaretRightOutlined style={{ color: '#CDDAF9' }} />
            </div>
          );
        };
      }
      if (element.key == 'shareStocks') {
        // 纯债久期
        element.render = (val, record) => {
          if (val === null || val === undefined) {
            return '--';
          }
          const result = accounting.formatNumber(Number(val), 2);
          return (
            // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
            <div
              style={{
                cursor: 'pointer',
              }}
              onClick={() => this.unitEstimationOnclick(record)}
            >
              <span className={styles.hoveUnderLine} style={{ marginRight: '9px' }}>
                {result}
              </span>
              <CaretRightOutlined style={{ color: '#CDDAF9' }} />
            </div>
          );
        };
      }
      if (element.key == 'bondPositions') {
        // 债券持仓占比
        element.render = (val, record) => {
          if (val === null || val === undefined) {
            return '--';
          }
          const result = accounting.formatNumber(Number(val * 100), 2);
          return (
            // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
            <div
              style={{
                cursor: 'pointer',
              }}
              onClick={() => this.bondPositionsOnclick(record)}
            >
              <span className={styles.hoveUnderLine} style={{ marginRight: '9px' }}>
                {result}%
              </span>
              <CaretRightOutlined style={{ color: '#CDDAF9' }} />
            </div>
          );
        };
      }
    });
    this.setState({ columns: fixedIncomeColumns });
  };

  // 未来一日净现金流点击响应
  riseFallOnclick = (record) => {
    record.weightSetting = '3'; // 含权设置为推荐
    sessionStorage.setItem('forecast', JSON.stringify(record));
    /// 跳转至【组合管理】-【现金流预测】
    this.props.dispatch(routerRedux.push(`/portfolioBuild/cashManage/forecast`));
    this.setState({
      activeIndex: record.productId,
    });
  };

  // 静态收益率和纯债久期点击响应
  unitEstimationOnclick = (record) => {
    if (JSON.stringify(record) == '{}') return;
    const profitOverview = {
      needPenetrate: '0', // 固定
      portfolioCode: record.productCode, // 产品code
      portfolioName: record.productName, // 产品名称
      timeRange: '4', // 固定
      timeStamp: new Date().getTime(),
    };
    // 将条件缓存
    sessionStorage.setItem('profitOverview', JSON.stringify(profitOverview));
    // 跳转至组合概览页面
    this.props.dispatch(routerRedux.push(`/performanceAnalysis/profitOverview`));
    this.setState({
      activeIndex: record.productId,
    });
  };

  // 债券持仓占比点击响应
  bondPositionsOnclick = (record) => {
    // 将条件缓存
    sessionStorage.setItem('assetDeploy', JSON.stringify(record));
    // 跳转至【绩效分析】-【资产配置】
    this.props.dispatch(routerRedux.push(`/performanceAnalysis/assetDeploy`));
    this.setState({
      activeIndex: record.productId,
    });
  };

  // 表格高亮行
  setClassName = (record) => (record.productId === this.state.activeIndex ? 'selectRow' : '');

  // 表格页码响应
  handleTableChange = (pagination) => {
    const { current, pageSize } = pagination;
    this.setState({
      currentPage: current,
      pageSize,
    });
  };

  render() {
    const { currentPage, pageSize } = this.state;
    const {
      keyFiguresM: { fixedIncomeData = [] },
    } = this.props;
    return (
      <div>
        <TableC
          columns={this.state.columns}
          loading={this.props.loading.effects['keyFiguresM/getFixedIncomeData']}
          dataSource={fixedIncomeData}
          scroll={{ x: 'max-content' }}
          rowKey='productId'
          rowClassName={this.setClassName} // 表格行点击高亮
          onRow={(record, index) => ({
            onDoubleClick: () => {
              this.selectRow(record, index);
            },
          })}
          // hidePage={true}
          onChange={this.handleTableChange}
          current={currentPage}
          pageSize={pageSize}
          size='small'
        />
      </div>
    );
  }
}
